<template>
  <div class="selectFee">
    <div class="goodsStyle">
      <el-form ref="searchForm" :model="searchForm" label-width="100px"  :inline="true" size="mini" v-if="isFirst">
        <el-form-item label="产品类型：" prop="startPlace">
          <el-input v-model="searchForm.chiCnname" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="searchBtn">查询</el-button>
          <el-button size="mini" type="primary" @click="sureBtn">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="费目列表" name="first">
        <el-table :data="feeListsData" border :height="feeListsHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @selection-change="handleSelectionChange">
          <el-table-column type="index" align="center" label=" " width="40"></el-table-column>
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="msiBill" label="费目名称" width="260" show-overflow-tooltip></el-table-column>
          <el-table-column prop="msiUnit" label="单位" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="msiPrice" label="单价" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="msiCurrency" label="币种" show-overflow-tooltip  ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="协议费目列表" name="second">
        <el-table :data="agreementFeeData" border :height="agreementFeeHeight" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="feeListClick">
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="msiBill" label="费目名称" width="260" show-overflow-tooltip></el-table-column>
          <el-table-column prop="msiUnit" label="单位" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="msiPrice" label="单价" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="msiCurrency" label="币种" show-overflow-tooltip  ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        ref="pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.pageSize"
        :layout="Pagination.layout"
        :total="Pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import {getFeeListService,getAgreeFeeListService} from '@/request/api'
export default {
  mixins: [paginationMixin],
  props: {
    sendMsg:{
      type:Object,
      required:true
    },
    sendData:{
      type:Object,
      required:true
    },
    sendComponentData:{
      type:Object,
      required:true
    },
  },
  data() {
    return {
      activeName: 'first', // tab选中
      isFirst: true,
      feeListsData: [], // 费目属性表格数据
      feeListsHeight: 420, // 费目属性表格高度
      agreementFeeData: [], // 协议费目列表数据
      agreementFeeHeight: 420, // 协议费目列表高度
      searchForm: {
        chiCnname: '', // 产品类型
      },
      selectTableData: [], // 选中的表格数组
    }
  },
  watch:{
    sendMsg() {
      console.log(this.sendMsg)
    },
    sendComponentData() {
      this.feeListsData = this.sendComponentData
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 点击协议费目列表
    feeListClick(row) {
      let newArr = []
      this.sendData.forEach(item => {
        newArr.push(item.msiBill)
      })
      if(newArr.indexOf(row.msiBill) != -1) {
        this.$alert('费目已存在', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      let needData = Object.assign(row,{closeDialog: false})
      this.$emit('secondChildData',needData)
    },
    handleClick(event) {
      if(event.index == 0) {
        this.isFirst = true
      }else if(event.index == 1){
        this.isFirst = false
      }
    },
    searchBtn() {
      this.getList()
    },
    getList() {
      if(this.sendMsg == 'shouldGetRMB') {
        let needArr = Object.assign(this.searchForm,{PageIndexs: this.Pagination.currentPage},{PageSizes: this.Pagination.pageSize},{bpsign: 'IF'},{currency: 'RMB'})
        getFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.feeListsData = res.data.FTKJWLHYPT
          }
        })
        getAgreeFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.agreementFeeData = res.data.FTKJWLHYPT
          }
        })
      }else if(this.sendMsg == 'shouldGetUSD') {
        let needArr = Object.assign(this.searchForm,{PageIndexs: this.Pagination.currentPage},{PageSizes: this.Pagination.pageSize},{bpsign: 'IF'},{currency: 'USD'})
        getFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.feeListsData = res.data.FTKJWLHYPT
          }
        })
        getAgreeFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.agreementFeeData = res.data.FTKJWLHYPT
          }
        })
      }else if(this.sendMsg == 'shouldPayRMB') {
        let needArr = Object.assign(this.searchForm,{PageIndexs: this.Pagination.currentPage},{PageSizes: this.Pagination.pageSize},{bpsign: 'EF'},{currency: 'RMB'})
        getFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.feeListsData = res.data.FTKJWLHYPT
          }
        })
        getAgreeFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.agreementFeeData = res.data.FTKJWLHYPT
          }
        })
      }else if(this.sendMsg == 'shouldPayUSD') {
        let needArr = Object.assign(this.searchForm,{PageIndexs: this.Pagination.currentPage},{PageSizes: this.Pagination.pageSize},{bpsign: 'EF'},{currency: 'USD'})
        getFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.feeListsData = res.data.FTKJWLHYPT
          }
        })
        getAgreeFeeListService(needArr).then(res => {
          if(res.success == 1){
            this.agreementFeeData = res.data.FTKJWLHYPT
          }
        })
      }
    },
    sureBtn() {
      let newArr = []
      this.sendData.forEach(item => {
        newArr.push(item.msiBill)
      })
      let oldArr = this.selectTableData.filter(items => {
        return (newArr.indexOf(items.msiBill) != -1)
      })
      if(oldArr.length > 0) {
        this.$alert('费目已存在', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      let needData = Object.assign({},{feeDetailData: this.selectTableData,closeDialog: false})
      this.$emit('secondChildData',needData)
    },
    handleSelectionChange(val) {
      val.forEach(item => {
        item.status = 0
      })
      this.selectTableData = val
    }
  }
}
</script>

<style lang="scss" scoped>
.selectFee {
  width: 100%;
  height: 580px;
  .block {
    margin-top: 10px;
  }
}
</style>
